<template>
  <el-main>
    <h3>机构信息列表</h3>
    <div class="top">
      <div>
        <el-button type="primary">新增机构</el-button>
        <el-button type="primary">联系人</el-button>
      </div>
      <div>
        <el-form>
          <el-form-item>
            <el-input placeholder="请输入关键字" />
          </el-form-item>
          <el-form-item>
            <el-select placeholder="全部">
              <el-option label="全部" value="0" />
              <el-option label="编号" value="1" />
              <el-option label="机构名称" value="2" />
              <el-option label="机构级别" value="3" />
              <el-option label="省份" value="4" />
              <el-option label="市名" value="5" />
              <el-option label="经办人" value="6" />
              <el-option label="联系人" value="7" />
              <el-option label="审核状态" value="8" />
              <el-option label="重要级别" value="9" />
              <el-option label="分配情况" value="10" />
              <el-option label="商机状态" value="11" />
              <el-option label="标签名" value="12" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- ======================表格======================== -->
    <div>
      <el-table :data="tableData.list" style="width: 100%" class="border">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="number" label="编号" width="120" />
        <el-table-column prop="jigou" label="机构名称" width="200" />
        <el-table-column prop="rank" label="机构级别" />
        <el-table-column prop="address" label="省份/市" width="100" />
        <el-table-column prop="name1" label="经办人" />
        <el-table-column prop="name2" label="联系人" />
        <el-table-column prop="status" label="审核状态" />
        <!-- =============================== -->
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button size="small" type="danger" @click="deleteRow(scope.row)"
              >删除</el-button
            >
            <el-button
              size="small"
              type="check"
              @click="handleCheck(scope.$index, scope.row)"
              >查看</el-button
            >
          </template></el-table-column
        >
        <!-- ============================= -->
      </el-table>
    </div>
    <!-- ================================================== -->
    <div class="demo-pagination-block">
      <div class="demonstration">Change page size</div>
      <el-pagination
        v-model:currentPage="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[10, 20, 30, 40]"
        layout=" sizes,prev, pager, next"
        :total="100"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- ============================================== -->
  </el-main>
</template>

<script setup>
import { ref } from "vue";
const onSubmit = () => {
  console.log("submit!");
};
const multipleTableRef = ref();
const multipleSelection = ref();
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
// const infolist = ref({
//   num: "100021",
//   name: "山东工业职业学院图书馆",
//   rank: "学校",
//   city: "福建省",
//   agent: "陈满",
//   people: "李雅琴",
//   status: "未审核",
// });
const handleEdit = (index, row) => {
  console.log(index, row);
};
const handleCheck = (index, row) => {
  console.log(index, row);
};
// =====================================
import { onMounted, reactive } from "vue";
import { RouterLink, RouterView } from "vue-router";
import axios from "axios";

//定义响应式数据
var tableData = reactive({ list: [] });

onMounted(() => {
  axios.get("/api/info/list").then((res) => {
    console.log(res.data.list);
    tableData.list = res.data.list;
  });
});

//
var deleteRow = (row) => {
  axios.post("/api/info/delete", { id: row.id }).then((res) => {
    console.log("delete", res.data);
    tableData.list = res.data.list;
  });
};
var editRow = (row) => {};

//分页
const currentPage2 = ref(5);
const pageSize2 = ref(100);
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
// =====================================
</script>

<style lang='scss' scoped>
.el-main {
  padding: 0;
  margin: 0;
}
h3 {
  padding: 0;
  text-align: center;
}
.top {
  display: flex;
  justify-content: space-between;
  div {
    display: inline-block;
    span {
      display: inline-block;
    }
  }
}
.el-form-item {
  margin-right: 10px;
}

.right {
  margin-left: 600px;
}
.border {
  border: 1px solid rgb(194, 190, 190);
  text-align: center;
}
.el-table_1_column_3 {
  border: 1px solid rgb(193, 186, 186);
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>